<template>
  <div :class="['el-col', `el-col-${span}`]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ColR',
  props: {
    span: {
      type: Number,
      default: 24
    }
  },
  computed: {
    gutter () {
      let parent = this.$parent
      while (parent && parent.$options.componentName !== 'RowR') {
        parent = parent.$parent
      }
      return parent ? parent.gutter : 0
    }
  }
}
</script>

<style scoped lang='scss'>
.el-col {
  float: left;
}

@for $i from 1 through 24 {
  .el-col-#{$i} {
    width: (100% / 24) * $i;
  }
}
</style>
